<template>
  <view class="page">
      <view class="remark_box">
        <textarea maxlength="50" class="remark" placeholder="请输入您的备注" v-model="remark"></textarea>
        <view class="count">{{ count }}</view>
      </view>
      <view class="recommend">
        <view class="hot">热门备注</view>
        <view class="content">
          <view class="recommend_item" @click="() => setRemark(recommend)" v-for="recommend in recommends" :key="recommend">
            {{ recommend }}
          </view>
        </view>
          
      </view>
      <view class="operate-box" @tap="onSubmit">完成</view>
  </view>
</template>

<script>

const recommends = [
  '尽量安排无烟车',
  '尽量安排新车',
  '准时送达取车点',
  '尽量安排本地牌照',
  '尽量满油发车',
]

export default {
  data(){
    return {
      remark: '',
      recommends
    }
  },
  onLoad(options){
    this.remark = options.remark || '';
  },
  computed: {
    count() {
      return `${this.remark.length}/50`
    }
  },
  methods: {
    setRemark(remark) {
      this.remark = remark;
    },
    onSubmit(){
      if (this.remark.trim() === '') return uni.showToast({ title: '备注不能为空', icon: 'none' })
      let pages = getCurrentPages();
      let prevPage = pages[pages.length - 2];
      prevPage.$vm.remark = this.remark;
      uni.navigateBack({ delta: 1 });
    },
  }
}
</script>

<style scoped lang="scss">
.page {
  height: 100vh;
  background-color: #FFFFFF;
  padding: 24rpx 32rpx;
  box-sizing: border-box;
  .remark_box {
    border-radius: 16rpx;
    overflow: hidden;
    position: relative;
    margin-bottom: 32rpx;
    .remark {
      width: 100%;
      padding: 20rpx;
      box-sizing: border-box;
      background-color: #F3F3F3;
      height: 260rpx;
    }
    .count {
      width: 66rpx;
      height: 40rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #88888A;
      line-height: 33rpx;
      text-align: right;
      font-style: normal;
      text-transform: none;
      position: absolute;
      right: 20rpx;
      bottom: 20rpx;
      z-index: 1;
    }
  }

  .recommend {
    .hot {
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 28rpx;
      color: rgba(0,0,0,0.9);
      line-height: 44rpx;
      text-align: left;
      font-style: normal;
      margin-bottom: 24rpx;
    }
    .content {
      display: flex;
      flex-wrap: wrap;
      gap: 16rpx;
      align-items: center;
      justify-content: flex-start;
      .recommend_item {
        background: #F3F3F3;
        border-radius: 12rpx;
        line-height: 64rpx;
        padding: 0 16rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: rgba(0,0,0,0.6);
      }
    }
  }
}

.operate-box{
  width: 686rpx;
  height: 96rpx;
  line-height: 96rpx;
  margin: 40rpx auto 30rpx;
  box-sizing: border-box;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  font-weight: 600;
  font-size: 32rpx;
  color: #FFFFFF;
  background: #008DFF;
  text-align: center;
  border-radius: 12rpx;
}
</style>